<template>
    <div class="w">
       <div class="e">
        <ul>
            <li>
                <img src="../images/0.2.png" alt="">
                <span>买二手车</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/0.2.png" alt="">
                <span>买二手车</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/0.2.png" alt="">
                <span>买二手车</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/0.2.png" alt="">
                <span>买二手车</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/0.2.png" alt="">
                <span>买二手车</span>
            </li>
        </ul>
       </div>
       <div class="r">
        <div class="y">
            <ul>
                <li>
                    <img src="../images/21.png" alt="">
                    <span>大众</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/21.png" alt="">
                    <span>大众</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/21.png" alt="">
                    <span>大众</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/21.png" alt="">
                    <span>大众</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/21.png" alt="">
                    <span>大众</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/21.png" alt="">
                    <span>大众</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/21.png" alt="">
                    <span>大众</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/21.png" alt="">
                    <span>大众</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/21.png" alt="">
                    <span>大众</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/21.png" alt="">
                    <span>大众</span>
                </li>
            </ul>
        </div>
        <div class="u">
            <ul>
                <li>
                    <button>3万以内</button>
                </li>
            </ul>
            <ul>
                <li>
                    <button>3-5万</button>
                </li>
            </ul>
            <ul>
                <li>
                    <button>5-8万</button>
                </li>
            </ul>
            <ul>
                <li>
                    <button>8-15万</button>
                </li>
            </ul>
            <ul>
                <li>
                    <button>15-20万</button>
                </li>
            </ul>
            <ul>
                <li>
                    <button>SUV</button>
                </li>
            </ul>
            <ul>
                <li>
                    <button>准新车</button>
                </li>
            </ul>
            <ul>
                <li>
                    <button>练手车</button>
                </li>
            </ul>
            <ul>
                <li>
                    <button>城市代步</button>
                </li>
            </ul>
            <ul>
                <li>
                    <button>更多</button>
                </li>
            </ul>
        </div>
       </div>
       <div class="i">
            <ul>
                <li>
                    <img src="../images/22.png" alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/22.png" alt="">
                </li>
            </ul>
        </div>
       <div class="p">
        <ul>
                <li>
                    <img src="../images/23.png" alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/23.png" alt="">
                </li>
            </ul>
       </div>
       <div class="a">
        <div class="left">
           <ul>
            <li>
                <img src="../images/24.png" alt="">
            </li>
           </ul>
           <ul>
            <li>
                <img src="../images/25.png" alt="">
            </li>
           </ul>
           <ul>
            <li>
                <img src="../images/25.png" alt="">
            </li>
           </ul>
           <ul>
            <li>
                <img src="../images/25.png" alt="">
            </li>
           </ul>
        </div>
        <div class="right">
            <ul>
                <li>
                    <img src="../images/26.png" alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/27.png" alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/25.png" alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="../images/25.png" alt="">
                </li>
            </ul>
        </div>
       </div>
      
    </div>
</template>

<script>

</script>

<style lang="scss" scoped>
.w{
    flex-wrap: wrap;
    display: flex;
    width: 100%;
    .e{
        display: flex;
        width: 100%;
        // background-color: aqua;
        height: 130px;
        img{
            margin-left: 25px;
            display: flex;
            width: 80px;
        }
        ul{
            margin: 10px;
        }
        span{
            margin-left: 10px;
            font-size: 30px;
        }
    }
    .r{
       
        width: 100%;
        height: 700px;
        // background-color: coral;
        margin-top: 10px;
        .y{
            flex-wrap: wrap;
            display: flex;
            // background-color: cornflowerblue;
            width: 100%;
            height: 380px;
        }
        img{
            width: 80px;
            display: flex;
        }
        span{
            margin-left: 10px;
            font-size: 20px;
        }
        ul{
            margin: 30px;
            margin-left: 40px;
        }
        .u{
            flex-wrap: wrap;
            display: flex;
            width: 100%;
            height: 320px;
            // background-color: blueviolet;
            button{
            display: flex;
            background-color: aliceblue;
            border: none;
            border-radius: 20px;
        }
        ul{
          
           margin: 20px;
        }
        }
       
    }
    .i{
        display: flex;
        // background-color: aqua;
        width: 100%;
        height: 180px;
        img{
          
            width: 320px;
        }
        ul{
            display: flex;
            margin: 10px ;
            margin-left: 40px;
        }
    }
    .p{
        display: flex;
        // background-color: aqua;
        width: 100%;
        height: 180px;
        img{
          
            width: 320px;
        }
        ul{
            display: flex;
            margin: 10px ;
            margin-left: 40px;
        }
    }
    .a{
        display: flex;
        // background-color: aqua;
        width: 100%;
        height: 1000px;
        margin-top: 30px;
        .left{
            width: 50%;
            height: 1000px;
            // background-color: darkorange;
           img{
            margin-left: 15px;
           }
        }
        .right{
            width: 50%;
            height: 1000px;
            // background-color: rgb(216, 206, 12);
        }
        img{
            margin-left: 10px;
        }
    }

}
</style>